
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>16110100521_谭创浩</title>
		
		<style>
			ul{list-style: none;}
			a{text-decoration: none;color: black;}
			.box{
				margin: 0;
				padding: 0;
				width: 508px;
				height: 25px;
				}
			a:hover{color: white;background-color: rgb(3,63,113);}
			.b1,.b2,.t{
				border: 1px solid rgb(3,63,113);
			}
			/*线条在框外,另算*/
			.b1{
				float: left;
				width: 56px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				margin-top: 2px;
				}
			.b2{
				float: left;
				width: 37px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				margin-left: 5px;
				margin-top: 2px;
				}
			.t{
				float: left;
				margin:2px 2px;
				width: 27px;
				height: 25px;
				line-height: 25px;
				text-align: center;
			}
		</style>
		
	</head>
	<body>
		<div class="box">
			<a class="b1" href="#">上一页</a>
			<ul>
				<li><a class="t" href="#">1</a></li>
				<li><a class="t" href="#">2</a></li>
				<li><a class="t" href="#">3</a></li>
				<li><a class="t" href="#">4</a></li>
				<li><a class="t" href="#">5</a></li>
				<li><a class="t" href="#">6</a></li>
				<li><a class="t" href="#">7</a></li>
				<li><a class="t" href="#">8</a></li>
				<li><a class="t" href="#">9</a></li>
				<li><a class="t" href="#">10</a></li>
				
			</ul>
			<a class="b1" href="#">下一页</a>
			<a class="b2" href="#">>>|</a>
		</div>
	</body>
</html>
